$box_padding_tb:10px;
$box_padding_lr:20px;

#index {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #d3d6dd;
	width: 100vw;
	height: 100vh; 
	transform: translate(-50%, -50%);
	transform-origin: left top;
	overflow-x: hidden;
	overflow-y: hidden;
	font-family: Alibaba_275;
	.bg {
		width: 100%;
		height: 100%;
		background-image: url("../assets/hqrepair/bg.png");
		background-size: cover;
		background-position: center center;
	}

	.host-body {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 100%;
		.top-title {
			position: relative;
			width: 100%;
			height: 3.5vw;
			flex-shrink: 0;
			background-image: url("../assets/hqrepair/top-bg-ref.png");
			background-size: cover;
			background-position: center center;
			.zs1 {
				position: absolute;
				left: 1vw;
				top: 0.4vw;
				height: 1.5vw;
				width: 25vw;
			}

			.zs2 {
				position: absolute;
				top: 2.2vw;
				height: 2px;
				width: 28%;
			}

			.zs3 {
				position: absolute;
				right: 0;
				top: 2.2vw;
				height: 2px;
				width: 28%;
				transform: rotateY(180deg);
			}

			.time {
				position: absolute;
				display: block;
				width: 15vw;
				text-align: left;
				right: 0;
				top: 0.2vw;
				font-family: DingTalk JinBuTi, DingTalk JinBuTi;
				font-size: 1.1vw;
				line-height: 2vw;
				text-shadow: 2px 1px 0px rgba(0, 31, 61, 0.46);
				text-align: left;
				transform: skewX(-3deg);
				color: #FFF;
			}
		}

		.body-box {
			height: calc(100% - 5vw);
			flex-grow: 1;
			flex-shrink: 1;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 0 $box_padding_lr;
			padding-bottom: 0.5vw;
			gap: $box_padding_lr;
			//下方区域的布局
			.row-content-box-fiexd {
				width: 29%;
				flex-shrink: 0;
			}
			.row-content-box-stretch {
				flex-shrink: 1;
				flex-grow: 1;
			}
			.left{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				gap: $box_padding_tb;
				.base-box{
					flex-basis: 33.33%;
				}
			}
			.center{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.center-box1{
					flex-basis: 32%;
				}
				.center-box2{
					flex-basis: 32%;
				}
				.center-box3{
					margin-top: 5px;
					flex-basis: 36%;
				}
			}
			.right{
				display: flex;
				flex-direction: column;
				gap: $box_padding_tb;
				.base-box{
					flex-basis: 33.33%;
				}
				.right-box1{
					flex-basis: 26%;
				}
				.right-box2{
					flex-basis: 30%;
				}
				.right-box3{
					flex-basis: 44%;
				}
			}
			.base-box{
				width: 100%;
				flex: 1;
			}
		}

		.foot {
			width: 100%;
			height: 1vw;
			flex-shrink: 0;
			background-image: url("../assets/hqrepair/bottom-bg-ref.png");
			background-size: cover;
			background-position: center center;
		}
	}
}